<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
<!--  顶部 ->  logo / 搜索 /菜单   -->
<div class="header" style="height: auto;" th:fragment="header">

    <!-- 整站文档结构临时保存，作用: 1、左边树 el-tree 组件数据,  2、整站文档搜索 -->
    <span id="docsTree" hidden> [[ ${docsTree} ]] </span>
    <!-- 整站文档结构临时保存，作用: 项目名称 + logo图 + 底部信息等等 -->
    <!-- <span id="docConfig" hidden> [[ ${config} ]] </span> -->

    <div class="xj-top">
        <el-row>
            <!-- 项目名 -->
            <el-col :span="5">
                <div class="doc-title-box">
                    <!--javascript:void(0) -->
                    <span> <a class="doc-title" th:style="'color:' + ${config.topTitleColor}" th:href="${staticPath +  '/index.html'}"> [[ ${config.topTitle}]] </a>   </span>
                    <!--  <a th:style="'color:' + ${config.topTitleColor}" th:href="${page== 'index'? './index.html' : '../index.html'}">-->
                    <div class="left-menu-icon"> &nbsp;</div>
                    <span id="pageHierarchy" hidden> [[ ${page == 'index' ? './' : '../'} ]]</span>
                </div>
            </el-col>

            <!-- 功能集 -->
            <el-col :span="19">
                <div class="grid-content bg-purple-light xj-menu-box" style="width: 99%">
                    <!-- 搜索 -->
                    <div class="search-box">
                        <input id="doc-search" aria-label="Search" autocomplete="off" spellcheck="false" value="" class="" th:placeholder="${config.topSearchTip}" oninput="searchAll()">
                    </div>

                    <!-- 搜索结果展示容器 -->
                    <el-card class="box-card search-box-results" hidden></el-card>
                    <span id="searchResultsCount" hidden></span>

                    <!-- 菜单 -->
                    <div id="mobile-menu-animate" class="top-menu-icon">&nbsp;</div>

                    <!-- 一级 -->
                    <el-menu id="el-menu-top" class="el-menu-demo" mode="horizontal" th:each="menu ,star : ${menuTop}">
                        <el-menu-item th:index="${menu.id}" th:if="${menu.children == null}">
                            <a th:href="${ menu.url}" th:target="${menu.spikType == 3 ? '_blank': '_self'}"> [[ ${menu.name} ]] </a>
                            <span th:if="${menu.spikType == 3}">
                                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                                    <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                                    <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                                </svg>
                            </span>
                        </el-menu-item>
                        <el-submenu th:index="${menu.id}" th:if="${menu.children != null}">
                            <template slot="title">[[ ${menu.name} ]]</template>
                            <!-- 二级 -->
                            <el-menu-item th:each="menuTwo : ${menu.children}" th:index="${menuTwo.id}" th:if="${menuTwo.children == null}">
                                <a th:href="${menuTwo.spikType == 3?  menuTwo.url : staticPath + menuTwo.url}" th:target="${menuTwo.spikType == 3 ? '_blank': '_self'}"> [[ ${menuTwo.name} ]] </a>
                                <span th:if="${menuTwo.spikType == 3}">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                                        <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                                        <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                                    </svg>
                                </span>
                            </el-menu-item>
                            <el-submenu th:each="menuTwo : ${menu.children}" th:index="${menuTwo.id}" th:if="${menuTwo.children != null}">
                                <template slot="title"> [[ ${menuTwo.name} ]]</template>
                                <!-- 三级 -->
                                <el-menu-item th:each="menuThree : ${menuTwo.children}" th:index="${menu.id}">
                                    <a th:href="${menuThree.spikType == 3?   menuThree.url: staticPath + menuThree.url}" th:target="${menuThree.spikType == 3 ? '_blank': '_self'}"> [[ ${menuThree.name} ]] </a>
                                    <span th:if="${menuThree.spikType == 3}">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                                        <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                                        <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                                    </svg>
                                </span>
                                </el-menu-item>
                            </el-submenu>
                        </el-submenu>
                    </el-menu>

                </div>
            </el-col>
        </el-row>
    </div>

    <!-- Mobile menu-->
    <div class="mobile-menu">
        <li th:each="item : ${menuTop}">
            <a th:href="${item.url} != null? ${item.url}: 'javacript:void(0);'">[[ ${ item.name } ]] </a>
            <span th:if="${item.spikType == 3}">
                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" style="color: #00a680" width="15" height="15" class="icon outbound">
                      <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                      <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                  </svg>
              </span>
            <img th:src="@{staticPath +'/static/plugins/mobile-menu/icon/el-icon-arrow-right.png'}" th:if="${item.children != null}" th:id="'menu-icon-' + item.id" th:onclick="clickIconHandle([[${item.id}]])">
            <ul th:id="'menu-'+ ${item.id} " hidden>
                <li th:each="itemTwo : ${item.children}">
                    <a th:href=" ${itemTwo.url} != null? ${itemTwo.url}: 'javacript:void(0);'">
                        [[ ${ itemTwo.name } ]]
                    </a>
                    <span th:if="${itemTwo.spikType == 3}">
                         <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" style="color: #00a680" width="15" height="15" class="icon outbound">
                             <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                             <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                         </svg>
                     </span>
                    <img th:src="@{staticPath +'/static/plugins/mobile-menu/icon/el-icon-arrow-right.png'}" th:if="${itemTwo.children!=null}" th:id="'menu-icon-' + itemTwo.id" th:onclick="clickIconHandle([[${itemTwo.id}]])">
                    <ul th:id="'menu-'+ ${itemTwo.id} " hidden>
                        <li th:each="menuThree : ${itemTwo.children}">
                            <a th:href=" ${menuThree.url} != null? ${menuThree.url}: 'javacript:void(0);'">
                                [[ ${ menuThree.name } ]]
                            </a>
                            <span th:if="${menuThree.spikType == 3}">
                         <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" style="color: #00a680" width="15" height="15" class="icon outbound">
                             <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                             <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                         </svg>
                     </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a th:href="${page== 'index'? './index.html' : '../index.html'}">返回首页 </a></li>
    </div>
    <script>
        /**
         * 监听菜单展示/收缩
         * @author wangsong
         * @param null
         * @date 2023/1/30 0030 15:13
         * @return
         * @version 1.0.0
         */
        $(document).ready(function () {
            /**
             * 点击手机端菜单展开/搜索
             */
            $(".left-menu-icon").click(function () {
                if (window.location.href.indexOf("/index") !== -1) {
                    alert("请在任意文档页点击展开文档列表")
                } else {
                    let oldWidth = $(".xj-docs-tree").css("width").replace("px", "");
                    // 处理手机端存在精度问题   // alert(oldWidth)
                    oldWidth = parseInt(oldWidth);
                    let width = oldWidth === 0 ? {width: '80%'} : {width: '0'};
                    $('.xj-docs-tree').animate(width, 20);
                }
            });
        });
    </script>
</div>
</body>
</html>